import React,{useCallback,useMemo,useReducer} from 'react';
const ADD = 'ADD';//加
const MINUS = 'MINUS';//减
//定义初始状态
let initialState = {count:0};
//定义一个reducer函数，它可以根据当前的状态和一个动作(action)计算新的下一个状态
/**
 * 用于计算下一个新的状态
 * @param {*} state 当前的状态或者说老状态
 * @param {*} action 动作，是一个简单的JS对象，但是必须要有一个type属性，表示动作的类型
 */
function reducer(state,action){
	//计算或者说判断动作的类型
	switch(action.type){
		case ADD://如果ADD的话，那么说明要加，返回一个新的对象，让count+1
			return {count:state.count+1};
		case MINUS://如果MINUS的话，那么说明要减1，返回一个新的对象，让count-1
			return {count:state.count-1};
		default://如果是一个未识别的类型，那就什么都不改，直接返回老状态
			return state;		
	}
}

function Counter(){
	//通过使用useReducer管理状态
	//接收2个参数 1参数是reducer处理状态函数，第2个参数是初始状态
	//执行后会返回一个包含两个元素的数组，第1个元素是当前状态值，
	//第2个元素是可以接受action并触发状态更新的dispatch函数
	//let [state,setState] = useState({count:0});  setState({count:1})
	let [state,dispatch] = useReducer(reducer,initialState);
	return (
		<div>
			<p>{state.count}</p>
			<button onClick={()=>dispatch({type:ADD})}>+</button>
			<button onClick={()=>dispatch({type:MINUS})}>-</button>
		</div>
	)
}
export default Counter;
